<template>
	<view>
		<view class="numb">
			<view class="numb1">
			    <view class="numb1-1">
			      <view class="numb1-11">
			        收款人
			      </view>
			      <view class="numb1-12">
			        <u-input v-model="name" placeholder="请输入真实姓名" input-align="right"/>
			      </view>
			    </view>
			    <view class="numb1-1">
			      <view class="numb1-11">
			        收款手机号
			      </view>
			      <view class="numb1-12">
			        <u-input v-model="account" placeholder="请输入手机号" input-align="right"/>
			      </view>
			    </view>
				<!-- 温馨提示 -->
				<view class="numb2">
					<view>
						温馨提示：
					</view>
					<view>
						1、请您从通讯录选择收款人正确手机号
					</view>
					<view>
						2、请务必确认收款人姓名、手机号真实有效
					</view>
					<view>
						3、如未在收款行设置手机号收款，则无法使用本功能对其转账
					</view>
				</view>
			    <u-button type="warning" @click="validateAndProceed" class="numbbtn">下一步</u-button>
			  </view>
		</view>
	</view>
</template>

<script>
	import {numberrtan} from "../../API/transfer.js"
	export default {
		data() {
			return {
				name: '',
				account: '',
				type: 'text', // Set the input type
				border: false,
				code:""
			}
		},
		methods: {
			validateAndProceed() {
			      if (!this.name) {
			        uni.showToast({ title: '不能为空', icon: 'error' });
			        return;
			      }
			
			      if (!this.account) {
			        uni.showToast({ title: '不能为空', icon: 'error' });
			        return;
			      }
			
			      // 此处添加手机号和姓名的正则验证逻辑
			      const nameRegex = /^[\u4e00-\u9fa5a-zA-Z]+$/;
			      const accountRegex = /^1\d{10}$/; // 以1开头的11位数字，模拟手机号正则
			
			      if (!nameRegex.test(this.name)) {
			        uni.showToast({ title: '请输入有效的真实姓名', icon: 'error' });
			        return;
			      }
			
			      if (!accountRegex.test(this.account)) {
			        uni.showToast({ title: '请输入有效的手机号', icon: 'error' });
			        return;
			      }
			
			      // 验证通过，执行下一步操作
				  numberrtan({
					  recipientPhone:this.account,
					  recipientName:this.name
				  }).then((res)=>{
					  if(res.data.code==200){
						   console.log(res.data.result.bankCard);
						   this.code=res.data.result.bankCard
							uni.navigateTo({
								url:"/pages/numberTransfer1/numberTransfer1?name="+this.name+'&number='+this.account+'&code='+this.code
							})
					  } 
				  }).catch((err)=>{
					  console.log(err);
				  })
				  
			    },
		}
	}
</script>

<style>                           
.numb{
	background-color: #f7f7f7;
	height: 1600rpx;
}
.numb1{
		margin-top: 30rpx;
		background-color: white;
	}
.numb1-1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 90rpx;
	border-bottom: 1rpx solid rgba(128, 128, 128,0.2);
	font-size: 35rpx;
}
.numb1-11{
	margin-left: 20rpx;
}
.numbbtn{
	margin-top: 30rpx;
}
.numb2{
	width: 700rpx;
	font-size: 30rpx;
	color: rgb(128,128,128);
	margin-top: 60rpx;
	margin-left: 20rpx;
}
</style>
